<template>
    <div>
        <div style="width: 100vw;height: 100vh;position: relative;">
            <div class="bigMap" id="amp-part"></div>
            <div class="header">
                <div class="header_warp">
                    <div class="header_top">
                        <div class="header_top_left">
                            <img class="left_img" src="../imgUrl/mapisIocn.png" alt="">
                            <div class="left_text">贞一环境智慧运管中心</div>
                        </div>

                        <div class="header_top_right">
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader001.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">污水厂总数/个</div>
                                    <div class="right_tnum">1</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader002.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">能耗/Kwh</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader003.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">设备总数/件</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader004.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">治理污水吨数/吨</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <img style="width: 100%;" src="../imgUrl/mapheaderxian.png" alt="">
                </div>
            </div>
            <div class="left">
                <div class="left_wrp">
                    <div class="left_wrp_card">
                        <div class="card_header">
                            设备统计
                        </div>
                        <img style="width: 100%;" src="../imgUrl/mapleftxian.png" alt="">
                        <div>
                            <PieMapChart :pieData="isForm" />
                        </div>
                    </div>
                    <div class="left_wrp_card">
                        <div class="card_header">
                            当月污水处理量
                        </div>
                        <img style="width: 100%;" src="../imgUrl/mapleftxian.png" alt="">
                        <div>
                            <lineMapChartStart />
                        </div>
                    </div>
                    <div class="left_wrp_card">
                        <div class="card_header">
                            污水处理排行
                        </div>
                        <img style="width: 100%;" src="../imgUrl/mapleftxian.png" alt="">
                        <div>
                            <div class="maptable_list auto-scroll-row">
                                <div class="maptable_li" style="text-align: left;">战点名称</div>
                                <div class="maptable_li" style="text-align:center;">处理量</div>
                                <div class="maptable_li" style="text-align: right;">较上月</div>
                            </div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="right">
                <div class="right_warp">
                    <div class="right_dianlian">
                        <div class="dianlian">
                            <div class="dianlian_top">
                                <img style="width: 100%;" src="../imgUrl/mapcarddianl.png" alt="">
                                <div class="top_text">今日耗电量</div>
                                <div class="top_num">0度</div>
                            </div>
                            <div class="dianlian_bottm">
                                <img style="text-align: right;width: 80%;" src="../imgUrl/mapcard001.png" alt="" />
                                <div class="bottm_text">较昨天</div>
                                <div class="bottm_num">增加0%</div>
                            </div>
                        </div>
                    </div>
                    <div class="right_dianlian">
                        <div class="dianlian">
                            <div class="dianlian_top">
                                <img style="width: 100%;" src="../imgUrl/mapcardchul.png" alt="">
                                <div class="top_text">今日进水量</div>
                                <div class="top_num">0吨</div>
                            </div>
                            <div class="dianlian_bottm">
                                <img style="text-align: right;width: 80%;" src="../imgUrl/mapcard002.png" alt="" />
                                <div class="bottm_text">较昨天</div>
                                <div class="bottm_num">增加0%</div>
                            </div>
                        </div>
                    </div>
                    <div class="right_dianlian">
                        <div class="dianlian">
                            <div class="dianlian_top">
                                <img style="width: 100%;" src="../imgUrl/mapcardchul.png" alt="">
                                <div class="top_text">今日处理量</div>
                                <div class="top_num">0吨</div>
                            </div>
                            <div class="dianlian_bottm">
                                <img style="text-align: right;width: 80%;" src="../imgUrl/mapcard003.png" alt="" />
                                <div class="bottm_text">较昨天</div>
                                <div class="bottm_num">增加0%</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="card_header">
                            实时告警
                        </div>
                        <img style="width: 100%;" src="../imgUrl/mapleftxian.png" alt="">
                        <div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspectionRight">
                                        <div class="maptable_li1">
                                            <img style="width: 18px;height: 18px;margin-right: 4px;"
                                                src="../imgUrl/maprihgtIocn.png" alt="">
                                            {{ item.name }}
                                        </div>
                                        <div class="maptable_li2" style="text-align:left;">{{ item.times }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { listDeviceShort } from '@/api/iot/device';
import lineMapChartStart from './one/lineMapChartStart.vue'
import barMapChart from './one/barMapChart.vue'
import PieMapChart from './one/PieMapChart.vue'
import axios from 'axios'
import autoScroll from 'vue-list-auto-scroll-tsc'
export default {
    components: {
        lineMapChartStart,
        barMapChart,
        PieMapChart,
        autoScroll,

    },
    data() {
        return {
            Weather: "",
            map: '',
            markList: [],
            partyRedIcon: new AMap.Icon({
                size: new AMap.Size(50, 50),    // 图标尺寸
                image: require('../imgUrl/markIocn.png'),  // Icon的图像
                imageSize: new AMap.Size(50, 50)   // 根据所设置的大小拉伸或压缩图片
            }),
            dayweather: '',
            daytemp: '',
            date: new Date(),
            dayData: '0',
            isForm: {
                normalData: 0,
                forewarningData: 0,
                offlineData: 0
            },
            mapInspection: [],
            isOpen: false,
            mapInspectionRight: []
        };
    },
    created() {
        window.mapviewBtn = (tyep, id) => {
            this.mapviewBtn(tyep, id)
        }

        this.daysUntil();
        this.deviceListFun();
    },
    mounted() {
        this.init();
    },
    watch: {},
    methods: {

        //初始化地图
        setMapOption() {
            let _this = this;
            this.map = new AMap.Map('amp-part', {
                mapStyle: 'amap://styles/darkblue',
                viewMode: '3D',
                pitch: 30,//倾斜角度
                zoom: 14,
                center: [114.128557, 32.100615],//中心点坐标
                zoomEnable: true,
                dragEnable: true,

            });
            AMap.plugin('AMap.Weather', function () {
                var weather = new AMap.Weather();
                //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
                weather.getLive('平桥区', function (err, data) {
                    if (!err) {
                        _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                        _this.daytemp = data.temperature
                    }
                });
            })
            this.setTages([{
                longitude: '114.128557',
                latitude: '32.100615',
                communityName: '甘南站',
                communityId: '1'
            }], this.map)
        },
        setTages(arry, map) {
            let _this = this;
            map.remove(this.markList)
            this.markList = []
            arry.map(ele => {

                let iconType = this.partyRedIcon
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(ele.longitude, ele.latitude),
                    icon: iconType
                });
                marker.setLabel({
                    direction: 'center',
                    offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                });
                marker.on('click', (e) => {
                    // console.log(ele.communityId);
                    // _this.isOpen = true
                    _this.mapInfo()
                });
                this.markList.push(marker)
                map.add(marker);
            })
            let Array = [0, 0, 0, 0]
            // if (this.markList.length == 1) {
            //     Array = [0, 0, 0, 0]
            // } else {
            //     Array = [0, 0, 0, -600]
            // }
            map.setFitView(this.marker, true, Array);
        },

        mapInfo() {
            //实例化信息窗体
            var content = [
                `     <div
                                style="  width: 550px;height: 170px;background: #1C2028;border-radius: 0px 0px 0px 0px;border: 1px solid #666666;display: flex;">
                                <div style="width: 40%;">
                                    <img style=" width: 100%;height: 100%;" src="http://zyhjxy.cn/profile/iot/1/2025-0402-140808.png" alt="">
                                </div>
                                <div style="width: 60%;padding: 10px 20px;">
                                    <div style="font-weight: 500;font-size: 18px;color: #FFFFFF;text-align: center;">甘南站
                                    </div>

                                    <div style=" display: flex;">
                                        <div style="width: 50%;margin-top: 5px;">
                                            <span style="font-weight: 500;font-size: 14px;color: #9292B6;">在线设备</span>
                                            <span
                                                style="font-weight: 500;font-size: 12px;color: #FFFFFF;padding: 0 10px;">1台</span>
                                        </div>
                                        <div style="width: 50%;margin-top: 5px;">
                                            <span style="font-weight: 500;font-size: 14px;color: #9292B6;">耗电总量</span>
                                            <span
                                                style="font-weight: 500;font-size: 12px;color: #FFFFFF;padding: 0 10px;">0Kw</span>
                                        </div>
                                    </div>
                                    <div style=" display: flex;">
                                        <div style="width: 50%;margin-top: 5px;">
                                            <span style="font-weight: 500;font-size: 14px;color: #9292B6;">告警设备</span>
                                            <span
                                                style="font-weight: 500;font-size: 12px;color: #FFFFFF;padding: 0 10px;">0台</span>
                                        </div>
                                        <div style="width: 50%;margin-top: 5px;">
                                            <span style="font-weight: 500;font-size: 14px;color: #9292B6;">净化污水</span>
                                            <span
                                                style="font-weight: 500;font-size: 12px;color: #FFFFFF;padding: 0 10px;">0吨</span>
                                        </div>
                                    </div>
                                    <div style=" display: flex;">
                                        <div style="width: 50%;margin-top: 5px;">
                                            <span style="font-weight: 500;font-size: 14px;color: #9292B6;">离线设备</span>
                                            <span
                                                style="font-weight: 500;font-size: 12px;color: #FFFFFF;padding: 0 10px;">0台</span>
                                        </div>
                                        <div style="width: 50%;margin-top: 5px;"></div>
                                    </div>
                                    <div style="display: flex;margin-top: 20px;">
                                        <div style="width: 50%;text-align: center;">
                                            <span onclick="mapviewBtn(2,33)"
                                                style="cursor: pointer;background-color: #003756;color: white;font-size: 14px;padding: 7px 20px;border-radius: 5px;">工艺控制</span>
                                        </div>
                                        <div style="width: 50%;text-align: center;">
                                            <span onclick="mapviewBtn(3,55)"
                                                style="cursor: pointer;background-color: #003756;color: white;font-size: 14px;padding: 7px 20px;border-radius: 5px;">数据分析</span>
                                        </div>
                                    </div>
                                </div>
                            </div>`
            ];

            var infoWindow = new AMap.InfoWindow({
                isCustom: true,//使用自定义窗体
                content: content.join("<br>"),
                offset: new AMap.Pixel(16, 5),
                // anchor: "top-left",
            });

            infoWindow.open(this.map, this.map.getCenter())
        },
        mapviewBtn(type, id) {
            this.$emit('success', {
                type: type,
                id: id
            })
        },
        init() {
            this.setMapOption();
        },
        dateFormat(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds;
        },
        closeFun() {
            window.close();
        },
        mapFoodBtn(type) {
            this.$emit('success1', {
                type: type
            })
        },
        daysUntil() {
            let today = new Date();
            let endDate = new Date('2024-12-01T00:00:00')
            const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
            let isData = Math.round(Math.abs((endDate - today) / oneDay));
            this.dayData = isData + ''
        },
        /** 查询所有简短设备列表 */
        deviceListFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listDeviceShort(params).then((response) => {
                let deviceList = response.rows;
                this.isForm.normalData = deviceList.length;
            });
        },
    },

};
</script>
<style lang="scss" scoped>
.bigMap {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;

}

.header {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 10vh;
    // background-color: #070B14;
    background: linear-gradient(177deg, #070B14 5%, rgba(7, 11, 20, 0) 100%) !important;
}

.left {
    position: absolute;
    left: 0;
    top: 13vh;
    width: 23vw;
    height: 83vh;
}

.right {
    position: absolute;
    right: 0;
    top: 13vh;
    width: 23vw;
    height: 83vh;
}

.header_warp {
    width: 100%;
    background: linear-gradient(177deg, #070B14 5%, rgba(7, 11, 20, 0) 100%);
    border-radius: 0px 0px 0px 0px;

    .header_top {
        display: flex;
        justify-content: space-between;

        .header_top_left {
            display: flex;
            padding: 16px 16px 0px 30px;

            .left_img {
                width: 60px;
                height: 60px;
            }

            .left_text {
                font-weight: bold;
                font-size: 32px;
                color: #FFFFFF;
                line-height: 60px;
                margin-left: 30px;
            }
        }

        .header_top_right {
            display: flex;
            // margin-top: 10px;
            padding-top: 10px;

            .right_warp {
                display: flex;

                .right_warp_left {
                    width: 70px;
                    padding: 10px;
                }

                .right_warp_right {
                    width: 200px;
                    padding: 10px 0px 0px 0px;

                    .right_text {
                        font-family: Inter, Inter;
                        font-weight: 400;
                        font-size: 18px;
                        color: #D7EBFF;

                    }

                    .right_tnum {
                        font-weight: bold;
                        font-size: 28px;
                        color: #FFFFFF;

                    }
                }
            }
        }
    }
}

.left_wrp {
    padding-top: 20px;
    height: 100%;
    background: linear-gradient(130deg, rgba(7, 11, 20, 0.9) 75%, rgba(7, 11, 20, 0) 100%);

    .left_wrp_card {
        padding: 0 20px;

        .card_header {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            padding-left: 20px;



        }

        .maptable {
            width: 96%;
            height: 23vh;
            padding: 10px 0;
            overflow: hidden;
            text-align: center;
            margin: 0px auto;

            ::-webkit-scrollbar {
                display: none;
            }


        }

        .maptable_list {
            display: flex;
            width: 100%;
            height: 26px;
            font-size: 14px;
            background: rgba(0, 170, 255, 0.08);
            border-radius: 0px 0px 0px 0px;
            color: rgba(255, 255, 255, 1);
            padding: 5px;
            margin-top: 3px;

            .maptable_li {
                width: 33%;
                overflow: hidden;
            }
        }
    }
}

.right_warp {
    padding-top: 20px;
    height: 100%;
    background: linear-gradient(260deg, rgba(7, 11, 20, 0.9) 75%, rgba(7, 11, 20, 0.0) 100%);

    .right_dianlian {
        text-align: right;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;

        .dianlian {
            width: 50%;

            .dianlian_top {
                position: relative;

                .top_text {
                    position: absolute;
                    right: 20px;
                    top: 6px;
                    color: white;
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                }

                .top_num {
                    position: absolute;
                    right: 20px;
                    top: 46px;
                    color: white;
                    font-family: Afacad, Afacad;
                    font-weight: 400;
                    font-size: 22px;
                    color: #FFFFFF;
                    line-height: 25px;
                }
            }

            .dianlian_bottm {
                position: relative;

                .bottm_text {
                    position: absolute;
                    left: 0px;
                    top: 5px;
                    font-weight: 300;
                    font-size: 12px;
                    color: #3FD87C;
                }

                .bottm_num {
                    position: absolute;
                    left: 50px;
                    top: 5px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #385E06;
                    line-height: 16px;
                }
            }
        }
    }

    .card_header {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 20px;
    }

    .maptable {
        width: 96%;
        height: 39vh;
        padding: 10px 0;
        overflow: hidden;
        text-align: center;
        margin: 0px auto;



        ::-webkit-scrollbar {
            display: none;
        }


    }

    .maptable_list {
        display: flex;
        width: 100%;
        height: 26px;
        font-size: 14px;
        border-radius: 0px 0px 0px 0px;
        color: rgba(255, 255, 255, 1);
        padding: 5px;
        margin-top: 3px;

        .maptable_li1 {
            width: 70px;
            height: 26px;
            overflow: hidden;
            background-image: url(../imgUrl/mapright001.png);
            text-align: center;
            display: flex;
            padding: 3px 10px;

        }

        .maptable_li2 {
            flex: 1;
            height: 26px;
            margin-left: 5px;
            background-image: url(../imgUrl/mapright002.png);
        }
    }
}



// ::v-deep .amap-marker-label {
//     background-color: transparent;
//     border: none;
// }
.maptitle {
    margin-left: 51px;
    padding-top: 7px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 20px;
    text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
    text-align: left;
    font-style: normal;
    text-transform: none;
    color: white;

}

.mapInfoview {
    width: 500px;
    height: 170px;
    background: #1C2028;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #666666;
    display: flex;

    .mapInfoview_left {
        width: 45%;

        .left_img {
            width: 100%;
            height: 100%;
        }
    }

    .mapInfoview_right {
        width: 55%;
        padding: 10px 20px;

        .right_text {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            text-align: center;
        }

        .right_center {
            display: flex;

            .right_view {
                width: 50%;
                margin-top: 5px;

                .lable {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 500;
                    font-size: 16px;
                    color: #9292B6;
                }

                .text {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                    padding: 0 10px;
                }
            }
        }

        .right_btn {
            display: flex;
            margin-top: 20px;

            .right_btnSPam {
                width: 50%;
                text-align: center;

                .btn {
                    background-color: #003756;
                    color: white;
                    font-size: 14px;
                    padding: 7px 20px;
                    border-radius: 5px;
                    cursor: pointer;

                }
            }
        }

    }
}
</style>